<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializeObject.js"></script>
    <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<ul id="tt"></ul>
<form id="ff" method="post">
    <div style="margin-bottom:20px">
        <span style="margin-right:33px">ParentId</span><input  type="text" name="parentId" id="parentId" data-options="label:'ParentId'" style="width:60%">
    </div>
    <div style="margin-bottom:20px">
        <input id="edit" class="easyui-textbox" name="text" style="width:60%" data-options="label:'文件名称',required:true">
    </div>

</form>
<div style="text-align:center;padding:5px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addRootNode()" style="width:80px">添加根节点</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addchildNode()" style="width:80px">添加子节点</a>
    <a href="javascript:void(0)" class ="easyui-linkbutton" onclick="removeNodes()" style="width:80px">删除节点</a>
    <a href="javascript:void(0)" class ="easyui-linkbutton" onclick="editNode()" style="width:80px">修改节点</a>
</div>
</body>
</html>
<script>
	$('#tt').tree({
        method:'get',
		url:'http://localhost:3000/cate/list',
        onClick(node){
			console.log(node);
			$('#parentId').val(node._id);
		}
	});

	function addRootNode(){
		$('#ff').form('submit',{
			onSubmit:function(){
				if($(this).form('enableValidation').form('validate')){
					var data = $("#ff").serializeObject();
					delete data.parentId;
					$.ajax({
						url:'http://localhost:3000/cate/data',
						method:'post',
						data:data,
					}).done(function(res){
						$("#tt").tree("reload")
					})
				}
			}
		});
	}
	function addchildNode(){
		$('#ff').form('submit',{
			onSubmit:function(){
				if($(this).form('enableValidation').form('validate')){
					var data = $("#ff").serializeObject();
					$.ajax({
						url:'http://localhost:3000/cate/data',
						method:'post',
						data:data
					}).done(function(res){
						$("#tt").tree("reload")
					})
				}
			}
		});
	}
	function removeNodes(){
		var node = $('#tt').tree('getSelected');
		$.ajax({
			url:'http://localhost:3000/cate/data/' + node._id,
			method:'delete'
		}).done(function(res){
			console.log(res);
			$("#tt").tree("reload")
		})
	}
	function editNode(){
		var edit = $("#edit").val()
		console.log(edit);
		var node = $('#tt').tree('getSelected');
		console.log(node._id);
		$.ajax({
			method:'put',
			url:'http://localhost:3000/cate/data/'+ node._id,
            data:{text:edit}

		}).done(function(res){
			$("#tt").tree("reload")
		})
	}

</script>